<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>订单详情</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>.container{max-width:900px;margin:0 auto;padding:16px}</style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/orders')" content="订单详情"></el-page-header>
    <el-descriptions title="订单信息" style="margin-top:12px;">
        <el-descriptions-item label="订单号">{{orderNo}}</el-descriptions-item>
    </el-descriptions>
    <el-table :data="items" style="width:100%; margin-top:12px;">
        <el-table-column prop="productName" label="商品"></el-table-column>
        <el-table-column prop="sellingPrice" label="单价" width="120"></el-table-column>
        <el-table-column prop="buyCount" label="数量" width="120"></el-table-column>
        <el-table-column label="小计" width="160">
            <template #default="{row}">¥{{(row.sellingPrice * row.buyCount).toFixed(2)}}</template>
        </el-table-column>
    </el-table>
</div>
<script>
const { createApp, ref, onMounted } = Vue
createApp({
    setup(){
        const query = new URLSearchParams(location.search)
        const orderNo = ref(query.get('orderNo')||'')
        const items = ref([])
        const go = (p)=>{ location.href = p }
        onMounted(async ()=>{
            const res = await fetch('/api/orders/' + orderNo.value)
            const json = await res.json()
            items.value = json.data || []
        })
        return { orderNo, items, go }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>



